<!DOCTYPE html>
<html>
<head>

        <title>修理厂</title>

        <link href="bootstrap.css" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <style>
		body {
			padding:20px;
		}
		.console {
			height: 400px;
			overflow: auto;
		}
		.username-msg {color:orange;}
		.connect-msg {color:green;}
		.disconnect-msg {color:red;}
		.send-msg {color:#888}
	</style>


	<script src="js/socket.io/socket.io.js"></script>
        <script src="js/moment.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

	<script>

                var userName1 = 'buyer_' + Math.floor((Math.random()*1000)+1);

		var buyerSocket =  io.connect('http://localhost:9092/buyer?clientId=buyer1');

                function connectHandler(parentId) {
                    connectAction(buyerSocket);
			return function() {
                            output('<span class="connect-msg">Client has connected to the server!</span>', parentId);
                        }
                }

                function messageHandler(parentId) {
                        return function(data) {
			     output('<span class="username-msg">' + '车件儿' + ':</span> ' + data.message+'--------->code码'+data.pushCode, parentId);
		        }
                }

                function disconnectHandler(parentId) {
                        return function() {
			     output('<span class="disconnect-msg">The client has disconnected!</span>', parentId);
                        }
                }

		function sendMessageHandler(parentId, userName, chatSocket) {
                        var message = $(parentId + ' .msg').val();
                        $(parentId + ' .msg').val('');

                        var jsonObject = {
                                          userName: userName,
                                          message: message};
                        chatSocket.json.send(jsonObject);
		}


		buyerSocket.on('connect', connectHandler('#buyer'));


		buyerSocket.on('message', messageHandler('#buyer'));


		buyerSocket.on('disconnect', disconnectHandler('#buyer'));


                function sendDisconnect1() {
                        buyerSocket.disconnect();
                }



		function sendMessage1() {
                        sendMessageHandler('#buyer', userName1, buyerSocket);
		}

		function connectAction(chatSocket){

            var jsonObject = {
                clientId: "buyer1"};
            chatSocket.json.send(jsonObject);
        }



		function output(message, parentId) {
                        var currentTime = "<span class='time'>" +  moment().format('HH:mm:ss.SSS') + "</span>";
                        var element = $("<div>" + currentTime + " " + message + "</div>");
			$(parentId + ' .console').prepend(element);
		}

        $(document).keydown(function(e){
            if(e.keyCode == 13) {
                $('.sendmsg').click();
            }
        });
	</script>
</head>

<body>

	<h1>疯狂修理厂员工1号</h1>

	<br/>

        <div id="buyer">
            <h4>消息队列</h4>
            <div class="console well">
            </div>

            <form class="well form-inline" onsubmit="return false;">
               <input class="msg input-xlarge" type="text" placeholder="Type something..."/>
               <button type="button" onClick="sendMessage1()" class="btn sendmsg" id="send1">Send</button>
               <button type="button" onClick="sendDisconnect1()" class="btn">Disconnect</button>
            </form>
        </div>





</body>

</html>
